<template>
  <div class="add container">
  	<Alert v-if="alert" v-bind:message="alert"></Alert>
	<div class="btn btn-default" @click="addBackClick">返回</div>
    <h1 class="page-header">添加用户</h1>
    <form v-on:submit="addCustomer">
    	<div class="well">
    		<h4>用户信息</h4>
    		<div class="form-group">
    			<label>姓名</label>
    			<input type="text" class="form-control" placeholder="name" v-model="customer.name">
    		</div>
    		<div class="form-group">
    			<label>电话</label>
    			<input type="text" class="form-control" placeholder="tell" v-model="customer.tell">
    		</div>
    		<div class="form-group">
    			<label>邮箱</label>
    			<input type="text" class="form-control" placeholder="email" v-model="customer.email">
    		</div>
    		<div class="form-group">
    			<label>学历</label>
    			<input type="text" class="form-control" placeholder="educational" v-model="customer.educational">
    		</div>
    		<div class="form-group">
    			<label>毕业学校</label>
    			<input type="text" class="form-control" placeholder="school" v-model="customer.school">
    		</div>
    		<div class="form-group">
    			<label>职业</label>
    			<input type="text" class="form-control" placeholder="profession" v-model="customer.profession">
    		</div>
    		<div class="form-group">
    			<label>个人简介</label>
    			<!-- <input type="text" class="form-control" placeholder="profile" v-model="customer.profile"> -->
    			<textarea class="form-control" rows="10" v-model="customer.describe"></textarea>
    		</div>
    		<button type="submit" class="btn btn-primary">添加</button>
    	</div>
    </form>
  </div>
</template>

<script>
import Alert from './Alert'
export default {
  name: 'add',
  data () {
    return {
      customer:{},
      alert:""
    }
  },
  methods:{
	addBackClick:function(){
		this.$router.go(-1);
	},
  	addCustomer(e){
		e.preventDefault();
		if(!this.customer.name || !this.customer.tell || !this.customer.email){
			this.$message({
				type:'warning',
				message:"请填写对应信息"
			})
		}else{
			let params = {
					name:this.customer.name,
					tell:this.customer.tell,
					email:this.customer.email,
					educational:this.customer.educational,
					school:this.customer.school,
					profession:this.customer.profession,
					describe:this.customer.describe
				}
			this.$http.post("/users/adduser",params).then(res => {
				if(res.data.code === 200){
					this.$message({
						type:'success',
						message:res.data.msg
					})
					this.$router.push({path:"/"});
				}else{
					this.$message({
						type:'warning',
						message:"用户添加失败"
					})
				}
			}).catch(err => {
				console.log(err);
			})
		}	
  	}
  },
  components:{
  	Alert
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
